<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::commonHeader('主页')">
</head>

<body>
<nav th:replace="common::commonNav"></nav>

<main role="main" class="container">
    <!--
        作者：635681077@qq.com
        时间：2019-04-03
        描述：幻灯片区域
    -->
    <div>
        <div id="myCarousel" class="carousel slide bg-inverse w-200 ml-auto mr-auto" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block w-100" th:src="@{~/img/3.jpg}" alt="First slide">
                    <div class="carousel-caption">
                        <h3>First slide</h3>
                        <p>This is the first slide.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" th:src="@{~/img/2.jpg}" alt="Second slide">
                    <div class="carousel-caption">
                        <h3>Second slide</h3>
                        <p>This is the second slide.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" th:src="@{~/img/1.jpg}" alt="Third slide">
                    <div class="carousel-caption">
                        <h3>Third slide</h3>
                        <p>This is the third slide.</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <!--
        作者：635681077@qq.com
        时间：2019-04-03
        描述：汇率显示区域
   -->
    <div class="col-12" style="margin-top: 50px;">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <button id="fxRateBtn" class="nav-link active" th:onclick="showFxRate()">
                            <img class="iconImg" th:src="@{~/img/dollar.png}"/>外汇牌价
                        </button>
                    </li>
                    <li class="nav-item">
                        <button id="rmbRateBtn" class="nav-link" th:onclick="showRmbRate()">
                            <img class="iconImg" th:src="@{~/img/transaction.png}"/>结售汇牌价
                        </button>
                    </li>
                </ul>
            </div>
            <div id="fxRateDiv" class="card-body">
                <div th:if="${fxRate['code'] ne 200}" class="alert alert-danger" role="alert">
                    <p>错误码：<span th:text="${fxRate.get('code')}"></span></p>
                    <p>错误信息：<span th:text="${fxRate.get('message')}"></span></p>
                </div>
                <div class="table-responsive" th:if="${fxRate['code'] eq 200}">
                    <table class="table table-hover">
                        <thead class="thead-default">
                        <tr>
                            <th>货币对</th>
                            <th>标准符号</th>
                            <th>买入价</th>
                            <th>卖出价</th>
                            <th>开盘价</th>
                            <th>最高价</th>
                            <th>最低价</th>
                            <th>震幅百分比</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="fxdata : ${fxRate.get('data')}">
                            <td th:text="${fxdata.value.currencyPairsName}"></td>
                            <td th:text="${fxdata.value.currencyPairsCode}"></td>
                            <td th:text="${fxdata.value.buyPic}"></td>
                            <td th:text="${fxdata.value.sellPic}"></td>
                            <td th:text="${fxdata.value.openPri}"></td>
                            <td th:text="${fxdata.value.highPic}"></td>
                            <td th:text="${fxdata.value.lowPic}"></td>
                            <td th:text="${fxdata.value.range}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="rmbRateDiv" class="card-body" style="display:none">
                <div th:if="${rmbRate['code'] ne 200}" class="alert alert-danger" role="alert">
                    <p>错误码：<span th:text="${rmbRate.get('code')}"></span></p>
                    <p>错误信息：<span th:text="${rmbRate.get('message')}"></span></p>
                </div>
                <div class="table-responsive" th:if="${fxRate['code'] eq 200}">
                    <table class="table table-hover">
                        <thead class="thead-default">
                        <tr>
                            <th>货币名称</th>
                            <th>标准符号</th>
                            <th>现汇买入价</th>
                            <th>现汇卖出价</th>
                            <th>银行折算价</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="rmbData : ${rmbRate.get('data')}">
                            <td th:text="${rmbData.value.currencyName}"></td>
                            <td th:text="${rmbData.value.currencyCode}"></td>
                            <td th:text="${rmbData.value.fbuyPri}"></td>
                            <td th:text="${rmbData.value.fsellPri}"></td>
                            <td th:text="${rmbData.value.bankConversionPri}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <h6 class="card-text text-center">免责声明：以上网站外汇数据仅供参考，请以实际购买时的交易数据为准。</h6>
        </div>
    </div>

    <!--
        作者：635681077@qq.com
        时间：2019-04-03
        描述：新闻头条区域
   -->
    <div class="col-12" style="margin-top: 50px;">
        <div class="card">
            <div class="card-header">
                <p class="card-title">国际新闻</p>
            </div>
            <div th:if="${headlines.get('code') ne 200}" class="alert alert-danger" role="alert">
                <p>错误码：<span th:text="${headlines.get('code')}"></span></p>
                <p>错误信息：<span th:text="${headlines.get('message')}"></span></p>
            </div>
            <div th:if="${headlines['code'] eq 200}">
                <div class="card-body table-responsive">
                    <table class="table table-hover">
                        <tbody>
                        <tr th:each="list : ${headlines.get('data')}">
                            <td th:each="news : ${list.value}">
                                <div class="card">
                                    <img class="img-fluid" th:src="@{${news.imgURL}}" th:alt="${news.authorName}">
                                    <div class="card-body">
                                        <a th:href="@{${news.newsURL}}">
                                            <span th:text="'['+${news.category}+']'+${news.title}"></span>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <a class="btn btn-secondary" href="#" role="button">了解更多 &raquo;</a>
            </div>
        </div>
    </div>

</main>
<!-- FOOTER -->
<footer class="container" style="margin-top: 50px;">
    <p class="float-right">
        <a href="#">Back to top</a>
    </p>
    <p>&copy; 2019 shiep Graduation design
        <span>&middot; Foreign exchange business management system</span>
    </p>
</footer>
<script type="text/javascript">
    function showFxRate() {
        $('#fxRateDiv').css('display', 'inline');
        $('#rmbRateDiv').css('display', 'none');
        $('#fxRateBtn').addClass('active');
        $('#rmbRateBtn').removeClass('active');
    }

    function showRmbRate() {
        $('#fxRateDiv').css('display', 'none');
        $('#rmbRateDiv').css('display', 'inline');
        $('#fxRateBtn').removeClass('active');
        $('#rmbRateBtn').addClass('active');
    }
</script>
</body>
</html>